<script lang="ts" setup>
import { onMounted, ref } from 'vue'; // 引入Vue的onMounted生命周期钩子和ref函数  
import { ElMessage, type ComponentSize } from 'element-plus' // 引入Element Plus的ElMessage组件和ComponentSize类型  
import { userInfoStore } from '../assets/userStore/userStore'; // 引入用户信息存储模块  
import { OrderModel } from '../assets/models/Order'; // 引入订单模型  
import { orderApis } from '../assets/apis/OrderApis'; // 引入订单API  
import { paymentApis } from '../assets/apis/PaymentApis'; // 引入支付API  
import { PaymentModel } from '../assets/models/Payment'; // 引入支付模型  

// 初始化用户信息存储实例  
const userStore = userInfoStore();

// 定义响应式变量  
const fill = ref(true); // 间距填充  
const size = ref<ComponentSize>('default'); // 组件大小  
const finishedOrderList = ref<Array<OrderModel>>([]); // 已完成订单列表  
const unfinishedOrderList = ref<Array<OrderModel>>([]); // 未完成订单列表  
const hasFinishedOrder = ref<boolean>(false); // 是否有已完成订单  
const hasUnfinishedOrder = ref<boolean>(false); // 是否有未完成订单  

// 组件挂载后执行的逻辑  
onMounted(() => {
    // 查询未完成订单  
    orderApis.queryUnfinishedOrder(userStore.id)
        .then((value: Array<OrderModel>) => {
            if (value) {
                unfinishedOrderList.value = value;
                hasUnfinishedOrder.value = true;
            } else {
                unfinishedOrderList.value = [];
                hasUnfinishedOrder.value = false;
            }
        })
    // 查询已完成订单  
    orderApis.queryFinishedOrder(userStore.id)
        .then((value: Array<OrderModel>) => {
            if (value) {
                finishedOrderList.value = value;
                hasFinishedOrder.value = true;
            } else {
                finishedOrderList.value = [];
                hasFinishedOrder.value = false;
            }
        })
})

// 更新订单状态并尝试支付  
const updateOrder = (order: OrderModel) => {
    orderApis.updateOrder(order.id!)// 更新订单状态为已支付请求  
        .then((value: OrderModel) => {
            if (value) {
                // 构造支付请求数据 
                let payment: PaymentModel = {
                    price: order.price,
                    user: order.user,
                    store: order.store.id,
                    order: order.id!
                }
                // 发起支付请求  
                paymentApis.paymentOrder(payment)
                    .then((result: boolean) => {
                        if (result) {
                            // 支付成功提示
                            ElMessage.success("支付成功");
                            // 重新查询未完成订单列表  
                            orderApis.queryUnfinishedOrder(userStore.id)
                                .then((value: Array<OrderModel>) => {
                                    if (value) {
                                        unfinishedOrderList.value = value;
                                        hasUnfinishedOrder.value = true;
                                    } else {
                                        unfinishedOrderList.value = [];
                                        hasUnfinishedOrder.value = false;
                                    }
                                })
                            // 重新查询已完成订单列表  
                            orderApis.queryFinishedOrder(userStore.id)
                                .then((value: Array<OrderModel>) => {
                                    if (value) {
                                        finishedOrderList.value = value;
                                        hasFinishedOrder.value = true;
                                    } else {
                                        finishedOrderList.value = [];
                                        hasFinishedOrder.value = false;
                                    }
                                })
                        } else {
                            // 支付失败提示
                            ElMessage.error("支付失败")
                        }
                    })
            }
        })
}
</script>

<template>
    <!-- 使用el-scrollbar组件实现滚动条效果 -->
    <el-scrollbar height="100%" style="overflow-y: hidden;width: 100%;">
        <!-- 使用el-row和el-col布局 -->
        <el-row style="width: 100%;" justify="center" align="middle">
            <!-- 未完成订单标题 -->
            <el-col :span="24"><el-divider content-position="left">
                    <el-text style="font-size: medium;font-weight: bold;">
                        正在进行中的订单
                    </el-text>
                </el-divider></el-col>
            <!-- 当没有未完成订单时显示 -->
            <el-empty v-show="!hasUnfinishedOrder" description="您还没有待支付的订单～" />
            <!-- 未完成订单列表 -->
            <el-col :span="24" style="margin-top: 1%;" v-show="hasUnfinishedOrder">
                <el-space wrap :size="size" :fill="fill" style="width: 100%;">
                    <!-- 循环渲染未完成订单 -->
                    <div v-for="unfinishOrder in unfinishedOrderList" :key="unfinishOrder.id">
                        <el-card shadow="hover" style="height: auto;">
                            <el-row style="width: 100%;">
                                <el-col :span="24">
                                    <!-- 订单编号和状态 -->
                                    <el-row justify="space-between">
                                        <el-col :span="21"><el-text>订单编号：{{ unfinishOrder.id }}</el-text></el-col>
                                        <el-col :span="3"><el-tag type="warning">状态：待支付</el-tag></el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24">
                                    <el-divider></el-divider>
                                </el-col>
                                <!-- 外卖名称和商家名称 -->
                                <el-row style="width: 100%;">
                                    <el-col :span="12">
                                        <el-text style="font-size: medium;">外卖名称：{{ unfinishOrder.takeout?.takeout_name
                                            }}</el-text>
                                    </el-col>
                                    <el-col :span="12" align="end">
                                        <el-text style="font-size: medium;">{{ unfinishOrder.store.store_name
                                            }}</el-text>
                                    </el-col>
                                </el-row>
                                <!-- 外卖图片 -->
                                <el-col :span="24">
                                    <el-image style="width: 200px; margin-top: 1%;"
                                        :src="`/api/${unfinishOrder.takeout.takeout_portrait}`"></el-image>
                                </el-col>
                                <!-- 交易金额 -->
                                <el-col :span="24" style="margin-top: 1%;">
                                    <el-text style="color: red;">交易金额：¥{{ unfinishOrder.price }}</el-text>
                                </el-col>
                                <!-- 支付按钮 -->
                                <el-col :span="24" style="margin-top: 1%;">
                                    <el-row style="width: 100%;">
                                        <el-col :span="24" align="end" style="padding: 2%;">
                                            <el-button plain type="warning"
                                                @click="updateOrder(unfinishOrder!)">立即支付</el-button>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                </el-space>
            </el-col>
            <!-- 已完成订单标题 -->
            <el-col :span="24" style="margin-top: 2%;"><el-divider content-position="left">
                    <el-text style="font-size: medium;font-weight: bold;">
                        已完成的订单
                    </el-text><!-- 此处可以添加已完成订单列表的渲染逻辑 -->
                </el-divider></el-col>
            <!-- 当没有已完成的订单时，显示这个空状态组件 -->
            <el-empty v-show="!hasFinishedOrder" description="您还没有已完成的订单哦～" />
            <!-- 使用el-col组件来创建一个占据全部24栅格宽度的列，用于包裹订单列表 -->
            <el-col :span="24" style="margin-top: 1%;" v-show="hasFinishedOrder">
                <!-- 使用el-space组件来创建子元素之间的间距，wrap属性允许子元素换行，size和fill属性控制间距和填充 -->
                <el-space wrap :size="size" :fill="fill" style="width: 100%;">
                    <!-- 使用v-for指令遍历finishedOrderList数组，为每个已完成的订单创建一个卡片 -->
                    <div v-for="finishedOrder in finishedOrderList" :key="finishedOrder.id">
                        <!-- 使用el-card组件来展示订单信息，shadow="hover"属性表示鼠标悬停时显示阴影 -->
                        <el-card shadow="hover" style="height: auto;">
                            <!-- 使用el-row和el-col组件来创建响应式布局 -->
                            <el-row style="width: 100%;">
                                <!-- 订单编号和状态 -->
                                <el-col :span="24">
                                    <el-row>
                                        <!-- 订单编号 -->
                                        <el-col :span="21"><el-text>订单编号：{{ finishedOrder.id }}</el-text></el-col>
                                        <!-- 订单状态 -->
                                        <el-col :span="3"><el-tag type="success">状态：已支付</el-tag></el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24">
                                    <!-- 分割线 -->
                                    <el-divider></el-divider>
                                </el-col>
                                <!-- 外卖名称和商家名称 -->
                                <el-row style="width: 100%;">
                                    <!-- 外卖名称 -->
                                    <el-col :span="12">
                                        <el-text style="font-size: medium;">外卖名称：{{ finishedOrder.takeout.takeout_name
                                            }}</el-text>
                                    </el-col>
                                    <!-- 商家名称 -->
                                    <el-col :span="12" align="end">
                                        <el-text style="font-size: medium;">{{ finishedOrder.store.store_name
                                            }}</el-text>
                                    </el-col>
                                </el-row>
                                <!-- 外卖图片 -->
                                <el-col :span="24">
                                    <el-image style="width: 200px; margin-top: 1%;"
                                        :src="`/api/${finishedOrder.takeout.takeout_portrait}`"></el-image>
                                </el-col>
                                <!-- 交易金额 -->
                                <el-col :span="24" style="margin-top: 1%;">
                                    <el-text style="color: red;">交易金额：¥{{ finishedOrder.price }}</el-text>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                </el-space>
            </el-col>
        </el-row>
    </el-scrollbar>
</template>